window.addEventListener('load', function () {
  let mask = document.querySelector('.mask');
  let big = document.querySelector('.big');
  let preview_img = document.querySelector('.preview_img');

  preview_img.addEventListener('mouseover', function () {
    mask.style.display = 'block';
    big.style.display = 'block';


  });

  preview_img.addEventListener('mouseout', function () {
    mask.style.display = 'none';
    big.style.display = 'none';
  });

  preview_img.addEventListener('mousemove', function (e) {
    var x = e.pageX - preview_img.offsetLeft;
    var y = e.pageY - preview_img.offsetTop;

    var maskX = x - mask.offsetWidth / 2;
    var maskY = y - mask.offsetHeight / 2;

    mask.style.top = y - mask.offsetWidth / 2 + 'px';
    mask.style.left = x - mask.offsetHeight / 2 + 'px';

    if (x < mask.offsetWidth / 2) {
      mask.style.left = 0 + 'px';
    }
    if (x > (preview_img.offsetWidth - mask.offsetWidth / 2)) {
      mask.style.left = preview_img.offsetWidth - mask.offsetWidth + 'px';
    }
    if (y < mask.offsetHeight / 2) {
      mask.style.top = 0 + 'px';
    }
    if (y > preview_img.offsetHeight - mask.offsetHeight / 2) {
      mask.style.top = preview_img.offsetHeight - mask.offsetHeight + 'px';
    }

    var bigImg = document.querySelector('.bigImg');

    bigImg.style.top = -maskY * (bigImg.offsetWidth - big.offsetWidth) / (preview_img.offsetWidth - mask.offsetWidth) + 'px';
    bigImg.style.left = -maskX * (bigImg.offsetHeight - big.offsetHeight) / (preview_img.offsetHeight - mask.offsetHeight) + 'px';
  })


})